<template>
  <div>
    <el-form-item label="图表高度">
      <el-input-number v-model="localData.height" controls-position="right" />
    </el-form-item>
    <el-form-item label="标题">
      <div style="display: flex; gap: 8px">
        <el-input v-model="localData.chartOptions.title.text" placeholder="请输入标题" />
        <el-button link type="primary" @click="handleTitleSetting('text')">样式配置</el-button>
      </div>
    </el-form-item>
    <el-form-item label="子标题">
      <div style="display: flex; gap: 8px">
        <el-input v-model="localData.chartOptions.title.subtext" placeholder="请输入标题" />
        <el-button link type="primary" @click="handleTitleSetting('subtext')">样式配置</el-button>
      </div>
    </el-form-item>
    <el-form-item label="标题位置">
      <el-radio-group v-model="localData.chartOptions.title.left">
        <el-radio-button label="左对齐" value="left" />
        <el-radio-button label="居中" value="center" />
        <el-radio-button label="右对齐" value="right" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="x轴标题">
      <div style="display: flex; gap: 8px">
        <el-input v-model="localData.chartOptions.xAxis.name" placeholder="请输入标题" />
        <el-button link type="primary" @click="handleTitleSetting('xname')">样式配置</el-button>
      </div>
    </el-form-item>
    <el-form-item label="y轴标题">
      <div style="display: flex; gap: 8px">
        <el-input v-model="localData.chartOptions.yAxis.name" placeholder="请输入标题" />
        <el-button link type="primary" @click="handleTitleSetting('yname')">样式配置</el-button>
      </div>
    </el-form-item>
    <el-form-item label="显示图例">
      <el-switch v-model="localData.chartOptions.legend.show" />
    </el-form-item>
    <el-form-item label="图例位置">
      <el-radio-group v-model="localData.chartOptions.legend.left">
        <el-radio-button label="左对齐" value="left" />
        <el-radio-button label="居中" value="center" />
        <el-radio-button label="右对齐" value="right" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="x轴维度">
      <el-cascader :props="CascaderProps" :options="attrList" v-model="localData.chartOptions.dataset.dimensions[0]" placeholder="请选择属性" filterable clearable :show-all-levels="false">
        <template #default="{ data: opt }">
          <span>{{ `${opt.entityDesc}(${opt.entityName})` }}</span>
        </template>
      </el-cascader>
    </el-form-item>
    <el-form-item label="y轴维度">
      <text-add-button text="添加维度" @click="handleYAxisAdd" />
      <el-table :data="localData.chartOptions.series">
        <el-table-column label="维度属性" width="150" align="center">
          <template #default="{ $index }">
            <el-cascader
              :props="CascaderProps"
              :options="attrList"
              v-model="localData.chartOptions.dataset.dimensions[$index + 1]"
              placeholder="请选择属性"
              filterable
              clearable
              :show-all-levels="false"
            >
              <template #default="{ data: opt }">
                <span>{{ `${opt.entityDesc}(${opt.entityName})` }}</span>
              </template>
            </el-cascader>
          </template>
        </el-table-column>
        <el-table-column label="图类型" width="120" align="center">
          <template #default="{ row }">
            <el-select v-model="row.type">
              <el-option label="折线图" value="line" />
              <el-option label="柱状图" value="bar" />
              <el-option label="饼图" value="pie" />
              <el-option label="散点图" value="scatter" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="{ $index }">
            <text-delete-button @click="handleYAxisDelete($index)" />
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="数据配置">
      <span style="margin-right: 8px">{{ getDictType }}</span>
      <text-edit-button text="配置" @click="openDictEdit" />
    </el-form-item>
    <title-setting v-model="visible" :data="curEditData" @submit="handleTitleSubmit" />
    <chart-data-setting v-model="showSetting" :data="localData" :options="formJson" @submit="handleDictUpdate" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import titleSetting from './titleSetting.vue';

export default defineComponent({
  name: 'BaseChartConfig',
  components: { titleSetting },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    },
    attrList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      localData: {},
      visible: false,
      showSetting: false,
      curEditData: {},
      curEditType: '',
      CascaderProps: {
        value: 'entityName',
        label: 'entityDescName',
        children: 'childList',
        emitPath: false
      }
    };
  },
  computed: {
    getDictType() {
      switch (this.localData.dicOption) {
        case 'static':
          return '静态数据';
        case 'remote':
          return '接口获取';
        default:
          return '静态数据';
      }
    }
  },
  watch: {
    data: {
      handler(newVal) {
        this.localData = newVal;
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  methods: {
    handleTitleSetting(type: string) {
      switch (type) {
        case 'text':
          this.curEditData = this.localData.chartOptions.title.textStyle;
          break;
        case 'subtext':
          this.curEditData = this.localData.chartOptions.title.subtextStyle;
          break;
        case 'xname':
          this.curEditData = this.localData.chartOptions.xAxis.nameTextStyle;
          break;
        case 'yname':
          this.curEditData = this.localData.chartOptions.yAxis.nameTextStyle;
          break;
        default:
          break;
      }
      this.curEditType = type;
      this.visible = true;
    },
    handleTitleSubmit(data) {
      switch (this.curEditType) {
        case 'text':
          this.localData.chartOptions.title.textStyle = data;
          break;
        case 'subtext':
          this.localData.chartOptions.title.subtextStyle = data;
          break;
        case 'xname':
          this.localData.chartOptions.xAxis.nameTextStyle = data;
          break;
        case 'yname':
          this.localData.chartOptions.yAxis.nameTextStyle = data;
          break;
        default:
          break;
      }
    },
    handleYAxisAdd() {
      this.localData.chartOptions.dataset.dimensions.push('');
      this.localData.chartOptions.series.push({
        type: 'line'
      });
    },
    handleYAxisDelete(index: number) {
      this.localData.chartOptions.dataset.dimensions.splice(index + 1, 1);
      this.localData.chartOptions.series.splice(index, 1);
    },
    openDictEdit() {
      this.showSetting = true;
    },
    handleDictUpdate(data) {
      for (let key in data) {
        this.localData[key] = data[key];
      }
    }
  }
});
</script>
